<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>动力金融网-CFCA认证的互联网金融公司</title>
<script type="text/javascript" th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/trafficStatistics.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/share.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />
    <script type="text/javascript" >
        $(function () {
            $("#bidMoney").val("");
        });
    </script>

    <script type="text/javascript" th:inline="javascript">

    </script>
</head>

<body>
<div id="header">
<!--<jsp:include page="commons/header.jsp"/>-->
    <div th:include="commons/header :: html"></div>
</div>

<!--散标投资 begin-->
<div id="sbtz" class="invest-details">

<!--页中begin-->
<div class="mainBox pro-details-body">
  <div class="homeWap clearfix" id="huacengPar">
    <div class="pro-details-left">
      
      <!-- 产品详情start -->
      <div class="pro-info-details">
        <div class="pro-name">
          <h2><span th:inline="text" style="font-size: 30px">[[${loanInfo.productName}]]</span></h2>
        </div>
        <div class="pro-info">
          <ul class="clearfix">
            <li class="info-1">
              <p>历史年化利率</p>
              <h3 th:inline="text">[[${loanInfo.rate}]]%</h3>
              <div class="info-bt">
              <span>本产品采用普通利率</span>
              </div>
            </li>
            <li class="info-2">
              <p>募集金额(元)</p>
              <h3 th:text="${loanInfo.productMoney}"></h3>
              <div class="info-bt">
              	<span>
              		<!-- 只有状态为0时为募集，其它都为已满标 -->
                    <span th:if="${loanInfo.leftProductMoney eq 0}" th:inline="text">
                        已满标,剩余募集金额 [[${loanInfo.leftProductMoney}]]元
                    </span>
                    <!-- 已满标 -->
                    <span th:unless="${loanInfo.leftProductMoney eq 0}" th:inline="text">
                        募集中,剩余募集金额 [[${loanInfo.leftProductMoney}]]元
                    </span>
              	</span>
              </div>
            </li>
            <li class="info-3">
              <p>投资周期</p>
              <!-- 只有新手宝产品周期为天 -->
              <h3 th:text="${loanInfo.productType eq 0? loanInfo.cycle + '天':loanInfo.cycle + '个月'}"></h3>
              <div class="info-bt"><span></span></div>
            </li>
          </ul>
        </div>
        <dl class="pro-syfs">
          <dt><span>收益获取方式</span></dt>
          <dd><span>收益返还：</span>到期还本付息</dd>
        </dl>
      </div>
      <!-- 产品详情end -->
      
      <!-- 投资记录start -->
      <div class="pro-details-cnt">
        <ul class="tabNav clearfix">
          <li><a id="one3" href="javascript:void(0);" class="s">投资记录</a></li>
        </ul>
        
        <div class="invest-record" id="con_one_3" style="display:block">
        <div class="vertical-side">投资列表</div>
		<dl class="record-list">
		<dt>
			<span class="record-num">序号</span><span class="invest-user">投资人</span><span class="invest-money">投资金额(元)</span><span class="invest-time">投资时间</span>
		</dt>
            </span>
            <span th:switch="${bidInfos.size()}">
                <!-- 如果投资记录为空，显示以下文字 -->
                <span th:case="0" style="text-align:center;">
			        <dd style="text-align:center;">该产品暂时还没有人投资，赶快去投资吧~</dd>
                </span>
                <!-- 如果有投资记录，循环遍历显示 -->
                <span th:case="*">
                    <span th:each="bidInfo:${bidInfos}">
                        <dd>
                            <span class="record-num" th:text="${bidInfoStat.index + 1}"></span>
                            <span class="invest-user" th:text="|${#strings.substring(bidInfo.user.phone, 0, 3)}******${#strings.substring(bidInfo.user.phone, 9, 11)}|"></span>
                            <span class="invest-money" th:text="${bidInfo.bidMoney}"></span>
                            <span class="invest-time" th:text="${#dates.format(bidInfo.bidTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                        </dd>
                    </span>
                </span>
            </span>

		</dl>
		</div>
      </div>
      <!-- 投资记录end -->
    </div>
    
    <!--页面右侧begin-->
    <div class="pro-details-right">
      <div class="right-calculator" id="huaceng">
        <div class="calculator-cnt">
          <h2>立即投资</h2>
          <dl class="profits-mode">
            <dt>收益获取方式</dt>
            <dd class="clearfix"><span id="fanhuan"><em>到期还本付息</em></span></dd>
          </dl>
          <dl class="usable">
            <dt>我的账户可用</dt>
            <dd>资金(元)：
            
	            	<!-- 判断用户是否登录：未登录，显示登录连接 -->
                <div th:if="${session.get('user') eq null}">
                    <span style="font-size:18px;color:#ff6161;vertical-align:bottom;"><a th:href="@{/user/toLoginPage.do}">请登录</a></span>
                </div>

	            	<!-- 判断用户是否登录：已登录，显示可用余额 -->
                <div th:unless="${session.get('user') eq null}">
                    <span style="font-size:18px;color:#ff6161;vertical-align:bottom;" id="availableMoney" th:text="|${availableMoney}元|"></span>
                </div>
	           		<!--<span style="font-size:18px;color:#ff6161;vertical-align:bottom;">1,000,12 元</span>-->
	        
            </dd>
          </dl>
          <div class="expect-box">
            <div class="expect-money">预计本息收入(元)：<span id="shouyi" class="money"></span><span class="prompt" style="display:block;">请在下方输入投资金额</span></div>
            <input type="text" id="bidMoney" name="bidMoney" onblur="checkMoney();" placeholder="请输入投资金额，应为100元的整倍数" maxlength="9"/>
            <div class="max-invest-money"></div>
          </div>
          <div class="invest-btn">
          	<a id="investNow" href="javascript:void(0)" class="btn-1" onclick="invest();">立即投资</a>
          </div>
          <input type="hidden" id="loanId" name="loanId" th:value="${loanInfo.id}"/>
        </div>
      </div>
    </div>
    <!--页面右侧end-->
  </div>
</div>
<!--页中end-->

</div>
<!--散标投资 end-->

<!--遮罩层-->
<div class="dialog-overlay" id="dialog-overlay1" style="display:none;"></div>

<!--投资成功浮层start-->
<div class="layer-body failureSuccess failurePayment" id="successPayment" style="display:none;width:500px;height:100px;top:75%;">
  <a class="layer-close" href="javascript:closeit();"></a>
  <div style="background:#f2f2f2; line-height:105px;text-align:center;"><font style="font-size:25px;">投资成功</font></div>
</div>
<!--投资成功浮层end-->

<!--页脚start-->
<jsp:include page="commons/footer.jsp"/>
<!--页脚end-->

<script type="text/javascript" th:inline="javascript">
/*    $(function () {
        let productMoney = [[${loanInfo.productMoney}]];
        let leftProductMoney = [[${loanInfo.leftProductMoney}]];
        let res = productMoney - leftProductMoney;

        if (res === productMoney) {
            $("#bidMoney").attr("readonly", "readonly").attr("placeholder", "此项目已满标").removeAttr("onblur");
            $("#investNow").css("background", "grey");
        }
    })*/

function closeit() {
	$("#successPayment").hide();
	$("#dialog-overlay1").hide();
	window.location.href="/p2p/user/toMyCenterPage.do";
}

function checkMoney() {
    let bidMoney = $.trim($("#bidMoney").val());

    let bidMinLimit = [[${loanInfo.bidMinLimit}]];
    let bidMaxLimit = [[${loanInfo.bidMaxLimit}]];

    let rate = [[${loanInfo.rate}]];
    let cycle = [[${loanInfo.cycle}]];
    let productType = [[${loanInfo.productType}]];

    $("#shouyi").text("");

    if (bidMoney === "") {
        $(".max-invest-money").text("投资金额不能为空");
    } else if (isNaN(bidMoney)) {
        $(".max-invest-money").text("投资金额只能是数字");
    }  else if (bidMoney <= 0) {
        $(".max-invest-money").text("投资金额应为大于 0 ");
    } else if (bidMoney % 100 !== 0) {
        $(".max-invest-money").text("投资金额应为 100 的整数");
    } else if (bidMoney < bidMinLimit) {
        $(".max-invest-money").text("投资金额不能低于起投金额：" + bidMinLimit);
    } else if (bidMoney > bidMaxLimit) {
        $(".max-invest-money").text("单笔投资金额不能超过最大投资限额：" + bidMaxLimit);
    } else {
        $(".max-invest-money").text("");

        let incomeMoney;
        if (productType === "0") {
            incomeMoney = bidMoney * (rate / 100 / 365) * cycle;
        } else {
            incomeMoney = bidMoney * (rate / 100 / 365) * (cycle * 30);
        }
        incomeMoney = Math.round(incomeMoney*Math.pow(10,2))/Math.pow(10,2);
        $("#shouyi").text(incomeMoney);
    }
}

function invest() {

    checkMoney();

    let user = [[${session.get('user')}]];
    let bidMoney = parseFloat($.trim($("#bidMoney").val()));
    let leftProductMoney = [[${loanInfo.leftProductMoney}]];
    let availableMoney = [[${availableMoney}]];
    let loanId = $("#loanId").val();

    if (user === null) {
        window.location.href = "/p2p/user/toLoginPage.do";
    } else if (user.name === null) {
        window.location.href = "/p2p/user/toRealNamePage.do";
    } else if (bidMoney > availableMoney) {
        $(".max-invest-money").text("用户金额不足，请充值");
    } else if (bidMoney > leftProductMoney) {
        $(".max-invest-money").text("投资金额不能大于产品可投金额");
    }  else {
        if ($(".max-invest-money").text() === "") {
            $.ajax({
                url: "/p2p/loan/invest.do",
                data: {
                    bidMoney:bidMoney,
                    loanId:loanId,
                    _method:"put"
                },
                type:"post",
                dataType:"json",
                success:function (data) {
                    if (data.code === 1) {
                        //投资成功后显示成功浮窗，关闭浮窗后跳转到个人中心页面
                        $("#successPayment").show();
                        $("#dialog-overlay1").show();
                    } else {
                        $(".max-invest-money").text(data.message);
                    }
                },
                error:function () {
                    $(".max-invest-money").text("系统繁忙，请稍后再试");
                }
            })
        }
    }
}
</script>
</body>
</html>